<template>
	<view class="body">
		<u-toast ref="uToast"></u-toast>
		<view class="denglu">
			<text class="denglu1">账号密码登录</text>
		</view>
		<view class="denglu2">
			<text class="denglu3">为了你的账号安全，请使用手机号登录</text>
		</view>
		<view class="zhanghao">
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="demo-layout bg-purple-light">
						<u-button :plain="true" text="中国 +86"></u-button>
					</view>
				</u-col>
				<u-col span="9">
					<view class="demo-layout bg-purple">
						<u--input placeholder="请输入手机号" border="surround" clearable v-model="form.mobile"></u--input>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="mima">
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="12">
					<view class="demo-layout bg-purple-light">
						<u--input placeholder="请输入密码" border="surround" clearable v-model="form.pwd"></u--input>
					</view>
				</u-col>
			</u-row>
		</view>

		<view class="dengluanniu">
			<button @click="login">登录</button>
		</view>
		<view class="login_text">
			<text>验证码登录</text>
			<view class="right">
				<text>忘记密码</text>
				<text>免费注册</text>
			</view>
		</view>
		<view class="bottom">
			<u-checkbox-group>
				<u-checkbox shape="circle" activeColor="green"></u-checkbox>
			</u-checkbox-group>	
			<text>阅读并同意</text>
			<text style="color:#38f">《用户协议》</text>
			<text>和</text>
			<text style="color:#38f">《隐私政策》</text>
		</view>
	</view>
</template>

<script>
	import {
		_login
	} from "../../api/login.js"
	export default {
		data() {
			return {
				form: {
					deviceId: " 1678876510618799581",
					deviceName: "PC",
					mobile: "13382019200",
					pwd: "a335006012A"
				}
			}
		},
		methods: {
			login() {
				_login(this.form).then(res => {
					console.log(res)
					if (res.code === 0) {
						// 缓存
						uni.setStorageSync("token",res.data.token)
						// 储存后跳转
						uni.switchTab({
							url: '../home/home'
						});
					} else {
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							title: '失败主题',
							message: res.msg,
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		height: 100vh;
		background-color: rgb(247, 248, 250);
		padding: 0 5%;
	}

	.denglu {
		margin-left: 60rpx;

		.denglu1 {
			font-weight: 700;
			font-size: 48rpx;
		}
	}

	.denglu2 {
		margin-left: 60rpx;
		margin-top: 20rpx;

		.denglu3 {
			color: #969799;
			font-size: 3.73vw;
		}
	}

	.zhanghao {
		font-size: 3.73vw;
		height: 80rpx;
		// background-color: greenyellow;
		margin-top: 30rpx;
		margin-left: 60rpx;
		padding-bottom: 2%;
		border-bottom: 1rpx solid #ccc;
	}

	.mima {
		height: 80rpx;
		padding-bottom: 2%;
		border-bottom: 1rpx solid #ccc;
		margin: 30rpx 0rpx 30rpx 60rpx;
	}

	.dengluanniu {
		width: 90%;
		margin: 5% auto;

		button {

			background-color: rgb(27, 167, 132);
			;
		}
	}

	.login_text {
		padding: 0 5%;
		color: #38f;
		font-size: 3.2vw;
		display: flex;
		justify-content: space-between;

		.right>text {
			margin: 0rpx 10rpx;
		}
	}

	.bottom {
		display: flex;
		font-size: 3.2vw;

		text {
			color: #969799;
		}

		position: fixed;
		bottom: 10%;
		left:15%;
	}
</style>
